﻿<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="jquery.js"></script>
<body>
<div id="input_search" class="input_search">
    <input type="text" class="search">
    <div class="options">
        <ul>
            <li>苹果</li>
            <li>香蕉</li>
            <li>梨</li>
            <li>Abc</li>
            <li>熊猫</li>
            <li>熊猫</li>
            <li>熊猫</li>
            <li>熊猫</li>
        </ul>
    </div>
</div>

<style>
    * {
        padding: 0;
        margin: 0;
    }

    .input_search {
        width: 200px;
    }

    .search {
        width: 200px;
    }

    ul {
        padding-left: 0px;
    }

    .options {
        display: none;
        border: 1px solid #ccc;
        overflow-y: auto;
        height: 200px;
    }

    .options li {
        padding: 5px 13px 10px 13px;
        list-style-type: none;
        border-bottom: 1px dashed #ccc;
    }

    .options li:hover {
        background-color: #ccc;
    }

    .options li:last-of-type {
        border-bottom: none;
    }

    .shad {
        border: 1px solid #ccc;
    }
</style>
</body>
<script>
    $(function () {
        $('.search').on('focus', function () {
            $('.options').show();
        })
        $('.search').on('input propertychange', function () {
            var $input_value = $('.search')
            $(".options li").each(function () {
                if ($(this).text().indexOf($input_value.val()) > -1) {
                    $(this).show()
                } else {
                    $(this).hide()
                }
            })
        })
        $(".options li").hover(function () {
            $(this).css("background-color", "#ccc")
        }, function () {
            $(this).css("background-color", "#fff")
        })
        $(".options li").each(function () {
            $(this).on('mousedown', function () {
                var value = $(this).text();
                $('.search').val(value);
            });
        })
        $('.search').on('blur', function () {
//            $('.options').hide();
        })
    })
</script>
</html>
